<template>
  <div class="metaTree">
    <div class="metaTree_title" :style="titleSize && titleSize !== '' ? 'font-size:' + titleSize + 'px' : ''">{{title}}
      <el-button v-if="otherBtn !== ''" size="mini" class="metaTree_titleBtn" @click="otherBtnClick">{{otherBtn}}</el-button>
    </div>
    <div class="metaTree_tree">
      <el-tree ref="metaTreeRef" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true" :expand-on-click-node="false" :node-key="defaultProps.key" :render-after-expand="false" :default-expand-all="true">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="nodeLabel">{{ node.label }}</span>
          <span class="nodeBtn">
            <i v-if="data.parentId === 0" class="el-icon-document-add" @click="add(data)"></i>
            <i class="el-icon-delete" @click="remove(data)"></i>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'metaTree',
    mixins: [],
    props: {
      title: {
        type: String,
        default: ''
      },
      titleSize: {
        type: String,
        default: ''
      },
      otherBtn: { 
        type: String,
        default: ''
      },
      defaultProps: { 
        type: Object,
        default: () => {
          return {
            children: 'children',
            label: 'label',
            key: 'id'
          }
        }
      },
      treeData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      handleNodeClick(item) {
        this.$emit("treeItemChoose", item)
      },
      otherBtnClick() {
        this.$emit("otherBtnClick")
      },
      add(item) {
        this.$emit("addMenu", item)
      },
      remove(item) {
        this.$emit("removeMenu", item)
      },
      setCurrentData(currentId) {
        this.$refs.metaTreeRef.setCurrentKey(currentId)
      }
    },
  }

</script>
<style lang='less'>
  .metaTree{
    box-sizing: border-box;
    min-width: 184px;
    margin: 0 8px;
    padding: 15px;
    border: 1px solid #e4eaec;
    border-radius: 6px;
    float: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    .metaTree_title{
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-size: 18px;
      border-bottom: 1px solid rgb(228, 234, 236);
      .metaTree_titleBtn{
        margin-left: 6px;
        padding: 7px 10px;
        float: right;
      }
    }
    .metaTree_tree{
      width: 100%;
      height: 100%;
      overflow: scroll;
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        .nodeLabel {
          max-width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
        }
        .nodeBtn {
          font-size: 12px;
          margin-left: 8px;
        }
      }
    }
    .metaTree_tree::-webkit-scrollbar {
      display: none;
    }
  }
</style>
